<template>
        <div class="attention">
            
            <!--关注车型头部-->
            <div class="attention-head">
                <div class="avatar-wrapper">
                    <img src="http://img5.imgtn.bdimg.com/it/u=1807906148,2751857719&fm=27&gp=0.jpg">
                </div>
                <div class="name-wrapper">
                    <span class="name">Z~</span>
                </div>


                <!--路由选择-->
                <div class="tab">
                    <div class="tab-item" :class="showcx ? 'ic-active' : 'ic-controll'"  @tap="showcxPage">
                        <span style="font-size:1rem;">118</span><br>全部车型
                    </div>
                    <div class="tab-item" :class="showsc ? 'ic-active' : 'ic-controll'"  @tap="showscPage">
                        <span style="font-size:1rem;">18</span><br>已收藏
                    </div>
                    <div class="tab-item" :class="showyh ? 'ic-active' : 'ic-controll'"  @tap="showyhPage">
                        <span style="font-size:1rem;">0</span><br>车城优惠
                    </div>
                </div>
            </div>
            <div  class="mui-content mui-scroll-wrapper" style="top:12rem;">
                <div class='mui-scroll'>
                     <all-car :showcx.sync="showcx" :showsc.sync="showsc"  :showyh.sync="showyh" ></all-car>
                </div>
            </div>
        </div>
</template>

<script>
    import CrossLine from '@/components/base/cross-line/cross-line'
    import AllCar from '@//components/base/attention/allcar/allcar.vue'
    import mui from 'static/js/mui.js'
     export default {
        components: {
            CrossLine,
            AllCar
        },
        data() {
            return {
                showcx:true,
                showsc:false,
                showyh:false
            }
        },
        props: {},
        watch: {},
        methods: {
            showcxPage(){
                this.showcx=true;
                this.showsc=false;
                this.showyh=false;
               mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
            },
            showscPage(){
                this.showcx=false;
                this.showsc=true;
                this.showyh=false;
              mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
            },
            showyhPage(){
                this.showcx=false;
                this.showsc=false;
                this.showyh=true;
             mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
            }
        },
        filters: {},
        computed: {},
        created() { },
        mounted() {
            mui.init();
            //竖向滚动
            mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: true //是否启用回弹
            });
        },
        destroyed() { }
    }


</script>

<style lang="scss" scoped>
    @import '~@/assets/scss/mixin.scss';
    .mui-bar-nav~.mui-content {
        padding-top: 0px;
    }
    .ic-active{
        color:#ff6a27;
    }
    .ic-controll{
        color:#fff;
    }
    .attention{
        width:100%;
        .attention-head{
            width:100%;
            background:currentColor;
              .avatar-wrapper {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                    padding-top:20px;
                    img {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                    }
                }
                .name-wrapper {
                    text-align: center;
                    height:3.4rem;
                    .name {
                        font-size: 0.8rem;
                        color: #fff;
                        line-height:75px;
                    }
                    .desc {
                        font-size: 16px;
                        color: #fcfefe;
                        i {
                            font-size: 18px;
                        }
                    }
                }
                .tab{
                    display:flex;
                    width:100%;
                    height:4rem;
                    line-height:1.2rem;
                    .tab-item{
                    flex:1;
                    text-align:center;
                    & > a{
                        font-size:0.5rem;
                        color:#fff!important;
                        &.active{
                        color:red;
                        }
                    }
                    }
                }
        }
    }
       
       
    
           
              
           
</style> 
    